<template>
    <div id="app" style="display: flex;">
      <nav>
        <router-link to="/home" active-class="active">首页</router-link>
        <router-link to="/about" active-class="active">关于</router-link>
        <router-link to="/atest" active-class="active">项目介绍</router-link>
        <router-link to="/teamdivision" active-class="active">团队分工</router-link>
        <router-link to="/member" active-class="active">成员信息</router-link>
        <router-link to="/news" active-class="active">新闻</router-link>
      </nav>
      <router-view></router-view> <!-- 这里会渲染当前匹配的组件 -->
    </div>
  </template>
  
  <style scoped>
  nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    background-color: #34c9e0;
    height: 100dvh;
    width: 300px;
  }
  nav a {
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
  }
  
  nav a:hover {
    background-color: #2dff4cea; /* 鼠标悬停时的背景色 */
  }
  
  /* 高亮当前激活的链接 */
  nav a.active {
    font-weight: bold;
    background-color: #ea98b5;
  }
  </style>